<template>
  <div>
    <!--总的大卡片-->
    <el-card shadow="always" :body-style="{ padding: '20px' }">

      <div slot="header"><!--添加部分  点击事件添加显示弹出来对话框   定义点击添加事件-->
        <el-button type="primary" size="small" icon="el-icon-plus" @click="showAdd">添加</el-button>
      </div>

      <!--表格的样式   data：表格将来展示的数据-----数组 boder：给表格加边框   
         prop：显示的字段名字 column属性   type：index展示序号  label：显示标题  -->
      <el-table border stripe :data="trademarkData.records">
        <el-table-column label="序号" align="center" width="80px" type="index"></el-table-column>
        <el-table-column label="品牌名称" prop="tmName"></el-table-column>
        <el-table-column label="品牌LOGO">
          <template v-slot="{ row, $index }"><!--赋值插槽-->
             <!--插槽数据回传，回传的是对象图片-->
            <img :src="row.logoUrl" alt="" style="width: 100px; height: 80px" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row, $index }">
            <!-- 修改品牌按钮：点击修改展示名字与LOGO； row用户选择的信息； 
                          服务器返回的信息存储不当，导致立即更改，不可以直接赋值，需要浅拷贝一份； 修改之后留在当页添加留在第一页 -->
            <el-button type="warning" size="mini" icon="el-icon-edit-outline" @click="showUpdate(row)"></el-button>
            <!-- 删除品牌按钮：传参相应的id带给服务器-->
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="open(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页器 条数  -->
      <el-pagination style="margin-top: 20px" @size-change="sizeChange" @current-change="getTrademarkList"
        :current-page.sync="currentPage" :page-sizes="[3, 6, 9]" :page-size="pageSize"
        layout="prev, pager, next, jumper,->,sizes,total" :total="trademarkData.total" background :pager-count="7">
      </el-pagination>

      <!-- 对话框 :visible.sync=隐藏与显示-->
      <el-dialog :title="tmParams.id ? '修改品牌' : '添加品牌'" :visible.sync="dialogFormVisible">
        <!--from表单  验证-->
        <el-form :model="tmParams" :rules="rules" ref="ruleForm">
          <!--  可以添加model属性收集数据，将来表单验证也需要  v-model收集到属性里-->
          <el-form-item label="品牌名称" :label-width="formLabelWidth" prop="tmName">
            <el-input v-model="tmParams.tmName" style="width: 380px"></el-input>
          </el-form-item>
          <el-form-item label="品牌LOGO" :label-width="formLabelWidth" prop="logoUrl">
            <!-- 上传图片 用户头像上传  上传之后可以检测到上传成功 成功会执行一次:on-success="handleAvatarSuccess" 上传之前会执行一次:before-upload="beforeAvatarUpload"
               action上传图片的接口 -->
            <el-upload class="avatar-uploader" :action="`${$BASE_API}/admin/product/fileUpload`" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <!--通过v-if="imageUrl"来检测 执行成功会返回res-->
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button><!--设置点击事件-->
          <el-button type="primary" @click="addOrUpdateTrademark">确 定</el-button>
        </div>
      </el-dialog>
      
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Trademark",
  data() {
    return {
      currentPage: 1,//分页器默认第1页
      pageSize: 3,//当页展示数据条数 
      trademarkData: [],//列表展示数据部分 
      dialogFormVisible: false,//对话框隐藏 点击添加
      formLabelWidth: "100px",//已经写死
      imageUrl: "",//上传图片路径
      // 表单验证规则
      rules: {
        tmName: [//品牌名称   
          { required: true, message: "请输入品牌名称", trigger: "blur" },
          {
            required: true,
            min: 2,
            max: 10,
            message: "品牌名称在2到10个字之间",
            trigger: "blur",
          },
        ],//图片路径
        logoUrl: [{ required: true, message: "LOGO不能为空,请上传图片" }],
      },
      // 收集品牌添加的数据
      tmParams: {
        tmName: "",//名称
        logoUrl: "",//图片
        id: "",//标识
      },
    };
  },

  mounted() {//定义请求，获取数据
    this.getTrademarkList();
  },

  methods: {

    // 每页展示数据条数变化的回调
    sizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getTrademarkList();
    },

    // 获取品牌列表的回调  页码默认1，当点击分页器时，到当前页面内容
    async getTrademarkList(currentPage = 1) {
      this.currentPage = currentPage;
      let res = await this.$API.trademark.get(this.currentPage, this.pageSize);
      if (res.code === 200) {
        this.trademarkData = res.data;
      }
    },

    // 添加按钮的回调
    showAdd() {
      this.tmParams = { tmName: "", logoUrl: "", id: "" };
      this.dialogFormVisible = true;
    },

    // 修改按钮的回调
    showUpdate(row) {
      this.tmParams = row;
      // vue2中记得写 this !!!
      this.dialogFormVisible = true;
    },

    // 添加/修改品牌的回调
    async addOrUpdateTrademark() {
      const { tmParams } = this;
      this.dialogFormVisible = false;
      await this.$API.trademark[tmParams.id ? "update" : "add"](tmParams);
      this.$message.success(tmParams.id ? "修改成功" : "添加成功");
      this.getTrademarkList();
    },

    // 上传图片相关回调
    handleAvatarSuccess(res, file) {
      // 记得修改图片的地址
      this.tmParams.logoUrl = res.data;
    },

    // 图片上传之前的钩子
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isJPG && isLt5M;
    },

    // 表单验证相关回调
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // 重置表单的回调
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
    // 删除单个品牌的回调
    open(trademark) {
      this.$confirm(`您确定要删除${trademark.tmName}吗?`, "提示", {
        type: "warning",
      })
        .then(async () => {
          await this.$API.trademark.remove(trademark.id);
          this.$message.success("删除成功");
          // 当前页剩一条数据,就获取上一页的数据,否则依然停在当前页
          this.getTrademarkList(
            this.trademarkData.length === 1 && this.currentPage > 1
              ? this.currentPage - 1
              : this.currentPage
          );
        })
        .catch(() => { });
    },
  },
};
</script>

<style scope>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>